<template>
    <div class="slide-box" :class="slide">
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
const { slide } = defineProps<{
    slide: 'left-slide' | 'right-slide',
}>()

</script>

<style scoped>
.right-slide {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: right-slide 1.5s ease-out forwards;
}

.left-slide {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    animation: left-slide 1.5s ease-out forwards;
}
</style>